<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片底侧空白缝隙</title>
    <style>
        div {
            border: 1px solid red;
        }

        /* 图片底部与边框之间有一个空隙，原因，图片底部默认与文字的基线对齐，但是边框与文字的底线对齐，基线与底线之间的部分就构成了图片与边框之间的空白间隙。 */
        /* 第一种解决方案将图片与文字的底线对齐 */
        img {
            /* vertical-align: bottom; */
            /* 第二种解决方案，将图片转化为块级元素，块级元素没有与文字基线对齐的情况 */
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <img src="images/ldh.jpg" alt="">pink老师
    </div>
</body>

</html>